<template>
    <div class="hospital">
        <div><el-button @click='motai' type="primary">新增</el-button></div>
        <!-- 表格 -->
        <div>
         <el-table
         
            :data="tableData"
             style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="80">
        </el-table-column>
      <el-table-column
                prop="name"
             label="医院名称"
                width="200">
      </el-table-column>
      <el-table-column
             prop="introduce"
              label="医院简介"
              width="200">
      </el-table-column>
     <el-table-column
                prop="address"
                label="医院地址"
                width="200">
        </el-table-column>
      <el-table-column
                prop="flags"
                label="标记"
                width="100">
        </el-table-column>
        <el-table-column
                prop="longitude"
                label="经度"
                width="100">
        </el-table-column>
        <el-table-column
                prop="latitude"
                label="维度"
                width="100">
        </el-table-column>
        <el-table-column
                label="操作"
                width="100">
                <template v-slot='scope'>
                    <span style="color:green;cursor:pointer;" @click="toEdit(scope.row)">删除</span>
                    <span style="color:green;cursor:pointer;" @click="xiugai(scope.row)">修改</span>
                </template>
        </el-table-column>
       
        </el-table>
        </div>
               <el-dialog title="录入医院信息" :visible.sync="dialogFormVisible" width='60%'>
           
            <el-form :model="form">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="介绍" :label-width="formLabelWidth">
                    <el-input type='textarea' v-model="form.introduce" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="省市区" :label-width="formLabelWidth">
                    <el-cascader
                        v-model="form.pca"
                        :options="pca"
                        :props="{value:'name',label:'name',  expandTrigger: 'hover' }"
                        >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标记" :label-width="formLabelWidth">
                    <el-input v-model="form.flags" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="经度" :label-width="formLabelWidth">
                    <el-input v-model="form.longitude" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="纬度" :label-width="formLabelWidth">
                    <el-input v-model="form.latitude" autocomplete="off"></el-input>
                </el-form-item>
                
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="xinzeng">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import qs from 'qs'
import axios from '@/http/axios'
import pca from '@/assets/pca.json'
export default {
    data(){
        return{
            tableData:[],
            pca,
            params:{
                page:1,
                pageSize:10
            },
            total:0,
            form:{},
            dialogFormVisible:false,
            categories:[],
            formLabelWidth:'120px'
        }
    },
    watch:{
        params:{
            handler:function(){
                 this.query_hospital()
            },     
        }
    },
    created(){
        this.table_data()
    }, 
    methods:{
        xiugai(item){
            this.dialogFormVisible = true 
            this.form=qs.parse(qs.stringify(item))
             this.form.pca = [],
            this.form.pca.push(item.province,item.city,item.area)
        },
        // 删除
        toEdit(item){
            let obj={
                id:item.id
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then((res)=>{
                axios({
                    url:'http://121.199.29.84:8001/hospital/deleteById',
                    method:'get',
                    params:obj,
                }).then((res)=>{
                    this.table_data(),
                    this.$notify({
                    title:'成功',
                    message:res.data.message,
                    type:'success'
                });
                })
            })
        },
        motai(){
            this.dialogFormVisible=true
            
        },
        table_data(){

            axios({
                url:'http://121.199.29.84:8001/hospital/pageQuery',
                method:'get',
                params:this.params

            }).then((res)=>{
                this.tableData=res.data.data.list
            })
        },
        xinzeng(){
            var data=Object.assign({},this.form)
            data.province=data.pca[0]
            data.city=data.pca[1]
            data.area=data.pca[2]
            delete data.pca
            axios({
                url:'http://121.199.29.84:8001/hospital/saveOrUpdate',
                method:'post',
                data:qs.stringify(data),
                contentType:'application/x-www-form-urlencoded'
            }).then((res)=>{
                this.dialogFormVisible=false
                this.table_data()
                this.$notify({
                    title:'成功',
                    message:res.data.message,
                    type:'success'
                });
            })

        },

    }
        

}
</script>